<template>
  <div class="container">
    <div>
      <div class="commomPaddingComtainer">
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form
            :inline="true"
            :model="filterField"
            ref="searchConditions"
            class="clearfix"
          >
            <el-form-item class="fr setRule">
              <colSetup
                :tableColList="colSetupTableCol"
                @getSelectMenuId="getSelectMenuIds"
              />
            </el-form-item>
            <el-form-item class="fr exportExcel">
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                @click="getExportList"
              >
                <span class="opetareText">导出报表</span>
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div>
          <el-table
            :data="tableData"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
            :max-height="tableHeight"
          >
            <my-column
              v-for="(item, index) in tableColOne"
              :key="index"
              :col="item"
              :mark="mark"
            ></my-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关数据"></emptyTable>
            </div>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyColumn from '@/components/constructAttendance/MyColumn'
import common from '../../kits/common'
export default {
  name: 'networkAllItem',
  components: {
    MyColumn,
  },
  data() {
    return {
      tableHeight: null,
      showExcel: false,
      loadingAll: true, //全部项目loading
      winHeight: window.innerHeight,
      height_top: 630,
      isShowDialog: false,
      isShowExcel: false,
      tableCol: [],
      colSetupTableCol: [],
      tableData: [],
      isShow: false,
      //搜索条件
      filterField: {},
      requestUrl: '/api-s/cs/bankstats/base/sitelist',
      selectProps: [],
      tableColOne: [],
      mark: 'networkAllItem',
    }
  },
  mounted() {
    this.getTableCol()
    this.getTableListAddItem()
    //挂载浏览器高度获取方法
    const that = this
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 235
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 235
      }
    })
  },
  methods: {
    /**
     * @description: 获取选中的列
     */
    getSelectMenuIds(val) {
      this.tableColOne = []
      val.forEach((item) => {
        this.tableColOne.push(...item.children)
      })
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    getExportList() {
      if (this.tableData.length == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning',
        })
      } else {
        let arrval = []
        for (var i = 0; i < this.tableColOne.length; i++) {
          if (this.tableColOne[i].isShow == true) {
            arrval.push(this.tableColOne[i].prop)
          }
        }
        window.location.href =
          common.commonApi +
          'api-s/cs/bankstats/base/exportsitelist?type=' +
          'BANK_SITE' +
          '&field=' +
          arrval +
          '&access_token=' +
          localStorage.getItem('access_token')
      }
    },
    /**
     * @description: 获取统计全部项目表头数据
     */
    getTableCol() {
      this.axios({
        method: 'post',
        url: '/api-s/dimension/head?type=' + 'BANK_SITE',
      })
        .then((response) => {
          if (!response.data.hasError) {
            let datas = JSON.parse(JSON.stringify(response.data.result))
            datas.forEach((item) => {
              item.isShow = false
              item.children.forEach((m) => {
                if (m.label == '网点名称') {
                  m.disabled = true
                }
              })
            })
            this.tableCol = datas
            this.tableColOne = []
            this.tableCol.forEach((item) => {
              this.tableColOne.push(...item.children)
            })
            this.colSetupTableCol = datas
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取全部表头失败',
            type: 'error',
          })
        })
    },
    /**
     * @description: 获取表格数据
     */
    getTableListAddItem() {
      this.axios({
        method: 'post',
        url: '/api-s/cs/bankstats/base/sitelist',
      })
        .then((response) => {
          this.tableData = response.data.result
          this.loadingAll = false
          if (this.tableData.length < 1) {
            this.isShow = true
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .commomPaddingComtainer {
    padding-top: 24px;
  }
  .mainCon {
    top: 0;
  }
}

.commomPadding {
  padding-top: 0;
  /deep/ .imgPrev {
    width: 50px;
  }
}

.exportExcel,
.setRule {
  position: absolute;
  top: -60px;
}

.exportExcel {
  right: -24px;
  margin-right: 0 !important;
}

.setRule {
  right: 88px;
}
.iconxianshi {
  cursor: pointer;
}
</style>
